<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../static/libs/css/layer.css">
    <link rel="stylesheet" href="../static/libs/css/login/logins.css">
    <link rel="stylesheet" href="../static/libs/css/login/resets.css">
    <link rel="stylesheet" href="../static/libs/css/login/userCommon.css">
    <link rel="stylesheet" href="../static/libs/css/login/bootstrap.css">
</head>
<style>
    .alert {
        position: absolute;
        width: 100%;
        text-align: center;
        display: none;
        z-index: 2;
    }
</style>

<body>
    <div class="alert alert-success" id="login_tip">这是一个提示</div>
    <header class="header-box">
        <div class="container">
            <a class="logo" href="./logitech.html"></a>
        </div>
        <div class="bg"></div>
    </header>
    <section class="login-main">
        <div style="background: url(../static/libs/images/login/登陆.jpg) no-repeat center;height:100%;">
            <a style="display:block; height:100%;" href="./login.html" target="_blank"></a>
        </div>

        <div class="login-box">
            <h4 class="login-title"><span class="name">账户登录</span><a class="link-a" href="./Registration.html">快速注册&gt;</a> </h4>
            <div class="login-error-info" style="display:none">
                <i class="icon-error"></i><span id="err"></span>
            </div>
            <div id="LoginFrom" class="login-form">
                <div class="form-list">
                    <input class="input-text" placeholder="请输入用户名..." value="" id="username" type="text">
                    <i class="icon-login-user"></i>
                    <i class="icon-close"></i>
                </div>
                <div class="form-list">
                    <input class="input-text" placeholder="请输入密码..." value="" id="password" type="password">
                    <i class="icon-login-password"></i>
                    <i class="icon-close"></i>
                </div>
                <div id="c1"></div>

            </div>
            <div>
                <p class="login-tool">
                    <label class="label-check"><input type="checkbox">自动登录</label>
                    <a class="link-a" href="#">忘记密码</a>
                </p>
                <a class="user-default-btn" href="javascript:void(0);" id="btn">登     录</a>
            </div>
            <div class="other-login">
                <label class="label-text">其他方式登陆：</label>
                <a class="icon-login-wx" title="微信" href="javascript:void(0);" id="linkBtnLgWX"></a>
                <a class="icon-login-qq" title="QQ" href="javascript:void(0);" id="linkBtnLgQQ"></a>

            </div>
        </div>

    </section>
    <footer class="footer-box">
        <div class="container">
            <p>罗技官方商城由罗技（中国）科技有限公司授权双齐国际贸易（上海）有限公司负责经营 2021 , all rights reserved</p>
            <p>
                <a href="https://www.logitech.com.cn/zh-cn" target="_blank">罗技官方网站</a>
                <a href="#" target="_blank">联系方式</a>
                <a href="#" target="_blank">隐私声明</a>
                <a href="#" target="_blank">用户服务协议</a>

                <a href="https://beian.miit.gov.cn" target="_blank">沪ICP备12002604号-1</a>
            </p>
        </div>
    </footer>
    <script src="../static/libs/javascripts/ajax-promise.js"></script>
    <script src="../static/libs/javascripts/cookie.js"></script>
    <script>
        var btn = document.getElementById("btn");
        var username = document.getElementById("username");
        var password = document.getElementById("password");

        btn.onclick = async function() {

            var options = {
                url: "http://127.0.0.1:8888/users/login",
                type: "POST",
                data: {
                    username: username.value,
                    password: password.value
                }
            }
            let data = await ajax_promise(options)
                // console.log( data );
                // 根据服务器返回的登录信息进行用户提示; 
            data = JSON.parse(data);

            // 用switch定义code情况; 
            switch (data.code) {
                case 0:
                    errorTip(data.message);
                    break;
                case 1:
                    successTip(data.message);

                    setTimeout(function() {
                            location.href = "./logitech.html"
                        }, 2000)
                        // 登录成功之后获取存储用的id; 
                    setCookie("userid", data.user.id);
                    setCookie("token", data.token, {
                        expires: 1
                    });

                    break;
            }
        }

        var login_tip = document.getElementById("login_tip");

        function errorTip(msg) {
            login_tip.style.display = "block";
            login_tip.classList.remove("alert-success");
            login_tip.classList.add("alert-danger");

            login_tip.innerHTML = msg;

            setTimeout(function() {
                login_tip.style.display = "none";
            }, 2000)
        }

        function successTip(msg) {
            login_tip.classList.remove("alert-danger");
            login_tip.classList.add("alert-success");
            login_tip.style.display = "block";
            login_tip.innerHTML = msg;

            setTimeout(function() {
                login_tip.style.display = "none";
            }, 2000)
        }
    </script>


</body>

</html>